<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>ID</title>
	<link rel="stylesheet" type="text/css" href="./css/style.css" />
	<link rel="stylesheet" href="./css/index.css">
	<style type="text/css">

	</style>
</head>

<body>
	<div class="container">
		<div class="masker" id='masker'>
			<div class="popup">
				<div class="top-bg">
					<div class="title">服务授权</div>
					<img src="./img/logo.png" alt="">
				</div>
				<div class="title2">授权 <strong>市政通</strong> 获取以下信息为你服务</div>
				<ul>
					<li>获得你的公开信息</li>
					<li>使用身份信息（姓名、手机号、证件号码）办理业务</li>
				</ul>
				<div class="hr"></div>
				<div class="ensure">同意<span>《用户授权协议》《用户服务协议》</span></div>
				<div class='ensure-btn' id='hide-masker'><span>确认授权</span></div>
			</div>
		</div>

		<div class="id-container">
			<header>
				<img onclick="showPop();" class='personal' src="./img/sao.png" alt="个人图标">
				<h1>市政通
				</h1>
				<div class="extra"><span class="place">北京</span> <span class="weather">晴 25℃～36℃</span></div>
			</header>
			<main>
				<div onclick="showPop()" class="identification">
					<span>登  录</span>
				</div>
			</main>
			<nav>
				<ul class="row">
					<li onclick="showPop()" class="item"><img src="./img/plus.png" alt="">
						<div class="name">身份证</div>
					</li>
					<li class="item"><img src="./img/plus.png" alt="">
						<div class="name">因私电子护照</div>
					</li>
					<li class="item"><img src="./img/plus.png" alt="">
						<div class="name">台湾通行证</div>
					</li>
					<li class="item"><img src="./img/plus.png" alt="">
						<div class="name">港澳通行证</div>
					</li>
				</ul>
				<ul class="row">
					<li class="item"><img src="./img/plus.png" alt="">
						<div class="name">内地通行证</div>
					</li>
					<li class="item"><img src="./img/plus.png" alt="">
						<div class="name">台湾通行证</div>
					</li>
					<li class="item"><img src="./img/plus.png" alt="">
						<div class="name">港澳台居住证</div>
					</li>
					<li class="item"><img src="./img/plus.png" alt="">
						<div class="name">中国绿卡</div>
					</li>
				</ul>
				<ul class="row">
					<li class="item"><img src="./img/plus.png" alt="">
						<div class="name">驾驶证</div>
					</li>
					<li class="item"><img src="./img/plus.png" alt="">
						<div class="name">行车证</div>
					</li>
					<li class="item"><img src="./img/more.png" alt="">
						<div class="name">敬请期待</div>
					</li>
					<li class="item"><img src="./img/more.png" alt="">
						<div class="name">期待更多</div>
					</li>
				</ul>
			</nav>
		</div>
		<div class="service-container">
			<div class="content">
				<div class="title">便民服务</div>
				<div class="nav-box">
					<div class="nav-item"><img src="./img/home_cxfw.png" alt="">
						<div class="nc">
							<div class="name">出行服务</div>
							<div class="kind">火车高铁 | 飞机轮船</div>
						</div>
					</div>
					<div class="nav-item"><img src="./img/Euros.png" alt="">
						<div class="nc">
							<div class="name">酒店住宿</div>
							<div class="kind">商务酒店 | 经济民宿</div>
						</div>
					</div>
					<div class="nav-item"><img src="./img/home_wdfu.png" alt="">
						<div class="nc">
							<div class="name">网点服务</div>
							<div class="kind">公安警力 | 移民局</div>
						</div>
					</div>
					<div class="nav-item"><img src="./img/Icon (2).png" alt="">
						<div class="nc">
							<div class="name">交通管理</div>
							<div class="kind">机动车 | 驾驶证</div>
						</div>
					</div>
					<div class="nav-item"><img src="./img/Icon.png" alt="">
						<div class="nc">
							<div class="name">出入境服务</div>
							<div class="kind">预约申请 | 再次签注</div>
						</div>
					</div>
					<div class="nav-item"><img src="./img/home_wgrfw.png" alt="">
						<div class="nc">
							<div class="name">外国人业务</div>
							<div class="kind">居留许可 | 住宿登记</div>
						</div>
					</div>
				</div>
			</div>
			<div class="clear-data"><span>清除数据</span></div>
		</div>
	</div>
    <script src="./js/hui.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">

	hui.ready(function(){

	// 关闭弹出层
	var masker = document.getElementById('masker');
	masker.style = 'display:none';
	window.ontouchmove = "";

	});

	function showPop(){
	var masker = document.getElementById('masker');
	masker.style = 'display:block';
	window.ontouchmove = "";
	};
		window.ontouchmove = function (e) {
			e.preventDefault && e.preventDefault();
			e.returnValue = false;
			e.stopPropagation && e.stopPropagation();
			return false;
		};
		document.getElementById('hide-masker').onclick = function () {
			var masker = document.getElementById('masker');
			masker.style = 'display:none';
			window.ontouchmove = "";

			hui.open('login.html');
		};
	</script>
</body>

</html>